<template>
  <div class="all">
    <div class="add-nav">
      <el-radio-group v-model="select" >
      <el-radio-button :label="true">轮播照片列表</el-radio-button>
      <el-radio-button :label="false">添加轮播照片</el-radio-button>
      </el-radio-group>

    </div>
    <!-- 列表 -->
    <div class="picList" v-if="select">
      <el-table :data="list">
        <el-table-column align="center" prop="orderNo" label="标号"></el-table-column>
        <el-table-column align="center" prop="title" label="标题"></el-table-column>
        <el-table-column align="center" label="照片">
          <template slot-scope="scope">
            <el-image :src="scope.row.picPath" style="width: 100px; height: 100px" fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="linkUrl" label="链接"></el-table-column>
        <el-table-column align="center" prop="description" label="描述"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="mod=JSON.parse(JSON.stringify(scope.row)),Rotation=true">修改</el-button>
            <el-button type="danger" size="small" @click="DelCarouse(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加 -->
    <div class="addPic" v-else>
      <el-form label-width="100px">
        <el-form-item label="轮播图标号">
          <el-input v-model="add.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="轮播图标题">
          <el-input v-model="add.title"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-change="AddUpload"
            :auto-upload="false">
            <img v-if="add.picPath" :src="add.picPath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input v-model="add.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="add.description"></el-input>
        </el-form-item>
        <el-button type="primary" @click="AddSubmit">提交</el-button>
        <el-button @click="select=true">取消</el-button>
      </el-form>
    </div>
    <!-- 修改 -->
    <el-dialog width="25%" title="修改轮播信息" :visible.sync="Rotation">
      <el-form label-width="100px">
          <el-form-item label="轮播图标号">
           <el-input v-model="mod.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="轮播图标题">
            <el-input v-model="mod.title"></el-input>
          </el-form-item>
          <el-form-item label="照片">
            <el-upload
              class="avatar-uploader"
              action="#"
              ref="Modupload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
              :auto-upload="false">
              <img v-if="mod.picPath" :src="mod.picPath" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="mod.linkUrl"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="mod.description"></el-input>
          </el-form-item>
          <el-button type="primary" @click="ModSubmit">提交</el-button>
          <el-button @click="mod=null">取消</el-button>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
   import Cookies from 'js-cookie'
   import {CarouselMod,CarouselList,CarouselUpload,CarouselAdd,CarouselDel} from '@/utils/API'
  export default{
    inject:["reload"],
    data(){
      return{
        select:true,
        list:null,
        imageUrl:'',
        shop:false,
        add:{
          picPath:'',
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')},
        mod:[],
        Rotation:false,
       type:{mod:false,add:false},
      }
    },
    methods:{
      //获取列表
      PostList(){
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
        CarouselList(data).then(res=>{
          this.$nextTick(()=>{
            this.list=res.data
          })

        })
      },
      //修改选择
        handleChange(file, fileList) {
          this.type.mod=true
          var _this=this
          var event = event || window.event
          var file = event.target.files[0];
          var reader = new FileReader();
              reader.onload = function(e) {
                _this.mod.picPath = e.target.result
               }
              reader.readAsDataURL(file);

            },
      //上传文件判断
      beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp'
      const isLt3M = file.size / 1024 / 1024 / 1024 < 2
      if (!isJPG) {this.$message.error('上传图片格式错误!')}
      if (!isLt3M) {this.$message.error('上传图片大小不能超过 3MB!')}
      return isJPG && isLt3M
      },
      //修改提交
      ModSubmit(){
          if(this.type.mod){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              picName:this.mod.title,
              img:this.mod.picPath.slice(22)
            }
            CarouselUpload(data).then(res=>{
              if(res.code==0){
               this.mod.picPath=res.data.imgUrl
               this.mod.adminName=Cookies.get('adminName')
               this.mod.token=Cookies.get('token')
               CarouselMod(this.mod).then(res=>{
                 if(res.code==0){
                   this.$message.success('修改成功')
                   this.reload()
                 }
               })
              }
            })
          }else{
            this.mod.adminName=Cookies.get('adminName')
            this.mod.token=Cookies.get('token')
            CarouselMod(this.mod).then(res=>{
              if(res.code==0){
                this.$message.success('修改成功')
                this.reload()
              }
            })
          }
      },
      //添加上传
      AddUpload(file, fileList){
        this.type.mod=true
        var _this=this
        var event = event || window.event
        var file = event.target.files[0];
        var reader = new FileReader();
            reader.onload = function(e) {
              _this.add.picPath = e.target.result
             }
            reader.readAsDataURL(file);
      },
      //添加提交
      AddSubmit(){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              picName:this.add.title,
              img:this.add.picPath.slice(22)
            }
            CarouselUpload(data).then(res=>{
              if(res.code==0){
               this.add.picPath=res.data.imgUrl
               CarouselAdd(this.add).then(res=>{
                 if(res.code==0){
                   this.$message.success('修改成功')
                   this.reload()
                 }
               })
              }
            })
      },
      //删除
      DelCarouse(e){
        this.$confirm('删除轮播图'+e.title+'','系统提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
        }).then(()=>{
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            id:e.id
          }
          CarouselDel(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }
          })
        }).catch(()=>{})
      },
    },
    mounted() {
      this.PostList()
    }
  }
</script>

<style lang="scss" scoped>
/deep/ .el-upload{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
/deep/ .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .hide{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
  .ModCarousel{
    padding: 1% 2% 2% 2%;
    border: 1px solid #eee;
    position: fixed;
    top: 21%;
    left:43%;
    background-color: #fff;
    z-index: 2;
  }

  }
  .addPic{
    padding: 15px;
    .el-form{
      text-align: center;
      width: 20%;
      margin: auto;
      .el-input{width: 100%;}
       /deep/ .el-form-item__label{font-size: 16px;}
    }
  }
  .el-form{
    text-align: center;
    padding-top: 5px;
    .el-input{width: 100%;}
     /deep/ .el-form-item__label{font-size: 16px;}
  }
</style>
